<template>
  <div class="wrapper">
    <div class="tab">
      <!-- <div class="tab-item" :class="{ current: status === 'all' }" @click="handle('all')">全部</div> -->
      <div class="tab-item" :class="{ current: status === '3' }" @click="handle('3')">审核中</div>
      <div class="tab-item" :class="{ current: status === '1' }" @click="handle('1')">已通过</div>
      <div class="tab-item" :class="{ current: status === '4' }" @click="handle('4')">已发货</div>
      <div class="tab-item" :class="{ current: status === '2' }" @click="handle('2')">未通过</div>
      <div class="tab-item" :class="{ current: status === '5' }" @click="handle('5')">已完成</div>
    </div>
    <template v-if="list.length > 0">
      <router-link tag="div"
        :to="'/center/returnGoodsList/returnGoodsDetail/' + item.order + '/' + item.mout_id + '/' + item.id"
        class="item"
        v-for="item of list"
        :key="item.order_code"
      >
        <div class="title">
          <p>有惊喜</p>
          <p v-if="item.out_status == 3">审核中</p>
          <p v-if="item.out_status == 1">已通过</p>
          <p v-if="item.out_status == 2">未通过</p>
          <p v-if="item.out_status == 4">已发货</p>
        </div>
         <GoodsItem :title="item.name" :img="item.url" :price="item.pice" :count="Number(item.out_num)"></GoodsItem>
        <p class="price">合计￥{{ item.pice * item.out_num }}</p>
      </router-link>
    </template>
    <template v-else>
      <p style="text-align: center;color: rgb(102, 102, 102);">暂无数据</p>
    </template>
  </div>
</template>

<script>
  import GoodsItem from '@/components/goodsItem/GoodsItem.vue';
  import { mapState } from 'vuex'
  export default {
    name: 'ReturnGoodsList',
    components: {
      GoodsItem
    },
    mounted() {
      this._getList()
    },
    data() {
      return {
        list: [],
        status: '3'
      }
    },
    computed: {
      ...mapState(['openId']),
      orderState() {
        let obj = {}
        switch (this.status){
          case '3':
            obj.out_status = 3
            break
          case '1':
            obj.out_status = 1
            break
          case '2':
            obj.out_status = 2
            break
          case '4':
            obj.out_status = 4
            break
          case '5':
            obj.out_status = 5
        }
        return obj
      }
    },
    methods: {
      handle(s) {
        this.status = s
        this.$nextTick(() => {
          this._getList()
        })
      },
      async _getList() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/retreat',
          method: 'GET',
          params: {
            openid: this.openId,
            ...this.orderState
          }
        })
        if (code === 0) {
          this.list = data.items
        } else {
          this.list = []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    padding: 0.2rem 0 0.4rem;
    font-size: 0.28rem;
    background: #eee;
    min-height: 100vh;
  }
  .tab {
    display: flex;
    padding: 0.2rem;
    margin-bottom: 0.2rem;
    background: #fff;
    font-size: 0.28rem;
    .tab-item {
      flex: 1;
      // margin: 0 0.4rem;
      text-align: center;
      &.current {
        color: $colorRed;
      }
    }
  }
  .item {
    margin-bottom: 0.2rem;
    padding: 0.2rem;
    background: #fff;
    .title {
      display: flex;
      align-items: center;
      padding: 0.1rem;
      font-size: 0.24rem;
      p {
        flex: 1;
        &:nth-child(2) {
          text-align: right;
        }
      }
    }
    .price {
      font-size: 0.2rem;
      text-align: right;
    }
  }
</style>
